<template>
  <div id="cont" v-loading="loading">
    <el-form ref="form" :inline="true" label-width="100px" class="query">
      <el-form-item>
        <el-button type="primary" icon="el-icon-plus" size="small" @click="addDict()" class="margin-bottom-10">新增数据</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="list">
      <el-table-column type="selection" align="center" width="45"></el-table-column>
      <el-table-column prop="sort" label="序号" align="center" width="50"></el-table-column>
      <el-table-column prop="name" label="数据名" align="center"></el-table-column>
      <el-table-column prop="value" label="数据值" align="center"></el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.date | dateTr }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 0" class="f-danger">冻结</span>
          <span v-else-if="scope.row.status == 1" class="f-success">正常</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="120px">
        <template slot-scope="scope">
          <el-button type="text" size="mini" icon="el-icon-edit" @click="update(scope.row)">修改</el-button>
          <el-button type="text" size="mini" icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 用户编辑模板 -->
    <el-dialog :title="title" :visible.sync="isEdit" width="45%" :before-close="cancel" :modal-append-to-body="false">
      <el-form ref="form" :data="form" size="small" label-width="80px">
        <el-form-item label="数据名称:">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="数据值:">
          <el-input v-model="form.value"></el-input>
        </el-form-item>
        <el-form-item label="状态:">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">冻结</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注:">
          <el-input type="textarea" v-model="form.remark" rows="3"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="ensure">确 定</el-button>
        <el-button type="default" size="mini" @click="cancel">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import app from '@/utils/index'
import { dictAdd, dictList, dictUpdate, dictDel } from '@/api/dict_api';
import { mapGetters } from 'vuex'

export default {
  name: 'dict',
  data() {
    return {
      loading: false,
      list: [],  // 角色列表
      queryParams: {
        page: 1,
        size: 10,
        name: '',
        date: ''
      },
      isEdit: false,  // 控制弹窗
      isNew: false,  // 是否新增角色
      title: '',  // 弹窗标题
      form: {
        name: '',
        value: '',
        status: 1,
        remark: ''
      }  // 表单内容
    }
  },
  filters: {
    dateTr(tm) {
      return app.dateTime(tm, {format: 'YY-MM-DD'});
    }
  },
  computed: {
    ...mapGetters({
      state_menus: 'menus'
    })
  },
  created() {
    this.getList();
  },
  mounted() {},
  methods: {
    // reset
    reset() {
      this.isEdit = false;
      for(const k in this.form) {
        this.form[k] = '';
      }
    },
    // 增加角色
    addDict() {
      this.isEdit = true;
      this.isNew = true;
    },
    // 字典列表
    getList() {
      dictList(this.queryParams).then(response => {
        const res = response.data;
        if(res.s) {
          res.d.forEach((it, i) => {
            it.sort = i+1;
          })
          this.list = res.d;
        }
      })
    },
    // 修改字典
    update(data) {
      this.isEdit = true;
      this.isNew = false;
      this.title = '编辑';
      this.form = {
        id: data._id,
        name: data.name,
        value: data.value,
        status: data.status,
        remark: data.remark
      };
    },
    // 弹窗操作
    ensure() {
      if(this.isNew) {  // 新增角色
        dictAdd(this.form).then(response => {
          const res = response.data;
          if(res.s) {
            this.$message.success('新增成功！');
            this.getList();
            this.reset();
          }else {
            this.$message.error('新增失败！')
          }
        })
      }else {
        dictUpdate(this.form).then(response => {
          const res = response.data;
          if(res.s) {
            this.$message.success('修改成功！');
            this.getList();
            this.reset();
          }else {
            this.$message.error('修改失败！')
          }
        })
      }
    },
    // 删除角色
    del(data) {
      this.$confirm('是否确定要删除角色？', '提醒', {
        confirmButtonText: '确定',
        cancelButtonText: '再想想',
        type: 'warning'
      }).then(() => {
        dictDel({id: data._id}).then(response => {
          const res = response.data;
          if(res.s) {
            this.$message.success('删除成功！');
            this.getList();
          }else {
            this.$message.warning('删除失败！');
          }
        })
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: '已取消删除！'
        })
      })
    },
    // 关闭弹窗
    cancel() {
      this.reset();
    }
  }
}
</script>

<style lang="less">
  .el-radio__label {
    font-size: 13px;
  }
</style>